<template>
	<!-- 添加公众号 -->
	<cl-dialog :title="`${editing ? '修改' : '添加'}公众号`" :visible.sync="accountVisible" @close="close" width="400px"
		:props="{ appendToBody: true, closeOnClickModal: false }">
		<el-form ref="form" :model="form" :rules="rules" label-position="top">
			<el-form-item label="所属事业部" prop="biz_id">
				<cl-select style="width: 100%" v-model="form.biz_id" placeholder="请选择" filterable @change="changeBiz">
					<el-option v-for="item in business" :key="item.biz_id" :label="item.biz_name" :value="item.biz_id" />
				</cl-select>
			</el-form-item>
			<el-form-item label="所属品牌" prop="bra_id">
				<cl-select style="width: 100%" v-model="form.bra_id" placeholder="请选择所属品牌" filterable @change="chanBra">
					<el-option v-for="item in bizRefData.brand" :key="item.bra_id" :label="item.bra_name"
						:value="item.bra_id" />
				</cl-select>
			</el-form-item>
			<el-form-item label="推广部门" prop="operator_dept">
				<cl-select v-model="form.operator_dept" style="width: 100%" placeholder="请选择推广部门" filterable
					@change="changeDept">
					<el-option v-for="item in deptList" :key="item.dept_id" :label="item.dept_name" :value="item.dept_id" />
				</cl-select>
			</el-form-item>

			<el-form-item label="推广人" prop="operator_id">
				<cl-select v-model="form.operator_id" placeholder="请选择推广人" style="width: 100%" filterable
					@change="changeUser">
					<el-option v-for="item in userList" :key="item.user_id" :label="item.user_name" :value="item.user_id" />
				</cl-select>
			</el-form-item>
			<el-form-item label="广告账户ID" prop="id_supplier">
				<cl-select v-model="form.id_supplier" placeholder="请选择" style="width: 100%" filterable>
					<el-option v-for="item in distributorList" :key="item.id" :label="item.supplie_id" :value="item.id" />
				</cl-select>
			</el-form-item>
			<el-form-item label="自动回复" prop="auto_response">
				<cl-select v-model="form.auto_response" placeholder="请选择自动回复" style="width: 100%" filterable>
					<el-option label="开启" :value="1" />
					<el-option label="关闭" :value="0" />
				</cl-select>
			</el-form-item>
			<el-form-item label="运营状态" prop="operation_status">
				<cl-select v-model="form.operation_status" placeholder="请选择运营状态" style="width: 100%" filterable>
					<el-option label="开启" :value="1" />
					<el-option label="暂停" :value="0" />
				</cl-select>
			</el-form-item>
		</el-form>
		<template #footer>
			<el-button @click="close">取消</el-button>
			<el-button type="primary" @click="submit">下一步</el-button>
		</template>
	</cl-dialog>
</template>
<script>
import { baseUrl } from "@/config/env";
export default {
	data() {
		return {
			accountVisible: false,
			form: {
				biz_id: "",
				bra_id: "",
				operator_dept: "",
				operator_id: "",
				auto_response: 0,
				operation_status: 1,
				id_supplier: ''
			},
			deptList: [],
			userList: [],
			rules: {
				biz_id: [{ required: true, message: "请选择所属事业部" }],
				bra_id: [{ required: true, message: "请选择所属品牌" }],
				operator_dept: [{ required: true, message: "请选择推广部门" }],
				operator_id: [{ required: true, message: "请选择推广推广人" }],
				auto_response: [{ required: true, message: "请选择自动回复" }],
				operation_status: [{ required: true, message: "请选择运营状态" }],
				id_supplier: [{ required: true, message: "请选择广告账户ID" }]

			},
			saving: false,
			editing: false,
			distributorList: []

		};
	},
	computed: {
		bizRefData() {
			let { biz_id } = this.form;
			return this.getBizRefData(biz_id);
		}
	},
	methods: {
		open(editing = false, data = {}) {
			this.form.biz_id = this.getCurrBiz();
			this.editing = editing;
			if (editing) {
				this.form = { ...this.form, ...data };
			}
			this.init();
			this.accountVisible = true;
		},
		close() {
			this.$resetFields(this.form);
			this.form.operation_status = 1;
			this.accountVisible = false;
		},
		async init() {
			const { biz_id } = this.form;
			this.getBizRefBrand(biz_id);
			this.getDeptList();
			this.getDeptUserList();
		},
		changeBiz() {
			this.form.bra_id = "";
			this.form.operator_dept = "";
			this.form.operator_id = "";
			this.init();
			this.getAdvertiserList()
		},
		changeDept() {
			this.form.operator_id = "";
			this.getDeptUserList();
		},
		async getDeptUserList() {
			const { biz_id, operator_dept } = this.form;
			this.userList =
				(await this.$service.user.deptuserlists({
					biz_id,
					post: 4,
					dept_id: operator_dept
				})) || [];
		},
		chanBra() {
			this.form.id_supplier = "";
			this.getAdvertiserList();
		},
		// 获取对应分销商账号
		async getAdvertiserList() {
			let { biz_id, bra_id, operator_id } = this.form;
			this.distributorList = [];
			let data = await this.$service.config.distributorLists({
				biz_id,
				bra_id,
				user_id: operator_id
			});
			this.distributorList = data;
		},
		changeUser() {
			this.form.id_supplier = "";
			this.getAdvertiserList();
		},
		// 部门
		async getDeptList() {
			const { biz_id } = this.form;
			if (!biz_id) return;
			const data = await this.$service.dept.list({
				parent_id: 0,
				is_store: 0,
				biz_id,
				post: 4
			});
			this.deptList = data.reduce((list, curr) => [...list, ...curr.children], []);
		},
		submit() {
			this.$refs.form.validate(async (valid, errors) => {
				this.showFormErr(errors);
				if (!valid) return;
				let { biz_id, bra_id, operator_dept, operator_id } = this.form;

				if (this.editing) {
					await this.$service.openplatform.wxedit(this.form).done(() => {
						this.saving = false;
					});
					this.$message.success("修改成功");
					this.close();
					this.$emit("confirm", this.editing);
					return;
				}
				window.open(
					`${baseUrl}/wx/preAuthUrl?biz_id=${biz_id}&bra_id=${bra_id}&operator_dept=${operator_dept}&operator_id=${operator_id}&user_id=${this.userInfo.user_id}`,
					"_blank"
				);

	
				// this.saving = true;
				// const res = await this.$service.openplatform[
				// 	this.editing ? "wxedit" : "preAuthUrl"
				// ](this.form).done(() => {
				// 	this.saving = false;
				// });
				// this.$message.success(this.editing ? "修改成功" : "新增成功");
				// this.close();
				// console.log("this.editing ? false : true", this.editing ? false : true);
				// this.$emit("confirm", this.editing, this.editing ? false : true);
				// if (this.editing) return;
				// window.open(res, "_blank");
			});
		}
	}
};
</script>
